<template>
    <div v-if="svgContent != null" v-html="icon" class="svg-icon-container" />
    <embed v-else-if="assetUrl != null" :src="icon" style="display:block;width:24px;height:24px" />
    <div v-else> {{ icon }}</div>
    <!-- <div v-else-if="assetUrl != null" v-html="icon" class="svg-icon-container" /> -->
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    name: {
        type: String,
        default: ''
    },
    svgContent: {
        type: String,
        required: false
    },
    // 需要被放在public文件夹下面
    assetUrl: {
        type: String,
        required: false
    },
    urlPrefix: {
        type: String,
        default: "/icons/" // public文件夹下的icons子文件夹
    }
});
const icon = computed(() => {
    if (props.svgContent != null) {
        return props.svgContent
    } else if (props.assetUrl != null) {
        return props.assetUrl.startsWith("/") ? props.assetUrl : props.urlPrefix + props.assetUrl
    } else {
        return `ITEM NOT FOUND FOR ICON: assetURL "${props.assetUrl}", svgContent: "${props.svgContent}"`
    }

});
</script>

<style>
.svg-icon-container {
    line-height: 24px;
    height: 24px;
}

.svg-icon-container svg {
    width: 24px;
    height: 24px;
    line-height: 24px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>